<template>
	<view class="" :style="{'--themcolor':usethemestore.themecolor,'--themcolor2':usethemestore.themecolor2}">
		<view class="fixtop" >
			<fixtitletopVue>
				<template #l>
					<view class="fix-l" @click="back">
						<view>
							<view class="iconfont icon-jiantou"></view>
						</view>
					</view>
				</template>
				<template #c>
					<view class="fix-c">
						我的收货地址
					</view>
				</template>
			</fixtitletopVue>
		</view>
		<view class="" :style="{height:heights}"></view>
		<scroll-view class="addressbox">
			<view class=""  v-for="(i,index) in useaddressstore.shaddress" :key="i.id" :class="{sleceteadd:useaddressstore.selcetaddressid==i.id}" style="margin-top: 20rpx; border-radius: 15rpx;" @click="chnageadddress(i.id)">
				<addresscardVue :data="i"/>
			</view>
			<view class="" v-if="!useaddressstore.shaddress.length" style="text-align: center;font-size: 25rpx;padding-top: 40rpx;">暂无地址</view>
		</scroll-view>
		<view class="bottom" @click="add_address">
			<view class="iconfont icon-tianjia"></view>
			新增收货地址
		</view>
	</view>
	
</template>

<script setup>
	import {ref} from 'vue'
	import fixtitletopVue from '../../components/fixtitletop/fixtitletop.vue';
	import addresscardVue from '../../components/addresscard/addresscard.vue';
	import {
		getstatusheight,
		gettitleheight
	} from '@/util/getsysinfo.js'
	import themestore from '@/store/theme.js'
	import addressstore from '@/store/address.js'
	const useaddressstore=addressstore()
	const usethemestore = themestore()
	const heights = getstatusheight() + gettitleheight() + 'px'
	const back=()=>{
		uni.navigateBack()
	}
	const slectesindex=ref(0)
	const chnageadddress=e=>{
		useaddressstore.selcetaddressid=e
		uni.navigateBack()
	}
	const add_address=()=>{
		uni.navigateTo({
			url:"/pages/addaddress/addaddress"
		})
	}
</script>

<style lang="scss" scoped>
	.bottom{
		height: 100rpx;
		background-color: #fff;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		gap: 15rpx;
		font-weight: 700;
		.iconfont{
			color:var(--themcolor);
			font-size: 35rpx;
		}
	}
	.sleceteadd{
		border: 4rpx solid var(--themcolor);
	}
	.addressbox{
		height: calc(100vh - v-bind(heights) - 100rpx);
		background-color: #eee;
		padding: 20rpx;
	}
	.fixtop {
        position: fixed;
		width: 100%;
		top: 0;
		background-color: #eee;
		padding: 0 20rpx;
	 border-bottom: 1rpx solid #dcdcdc;
		
		.fix-l {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
	
			.iconfont {
				font-size: 25rpx ;
			}
		}
	
		.fix-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>